<template>
  <div class="page home">
    <div v-if="alone.steps == 1" class="o-step-1">
      <div class="banner">
        <img src="@/assets/images/banner.jpg" alt="">
      </div>

      <div class="form-area clearfix">
        <span class="label fl lh80"><span class="text-warning">*</span>姓名:</span>
        <div class="mi-input fr">
          <nut-textinput
            v-model="step1Ajax.data.nickName"
            placeholder="请输入姓名"
          />
        </div>
      </div>
      <div class="form-area">
        <nut-radiogroup v-model="step1Ajax.data.gender">
          <span class="label"><span class="text-warning">*</span>性别:</span>
          <nut-radio :label="1">男</nut-radio>
          <nut-radio :label="2">女</nut-radio>
        </nut-radiogroup>
      </div>
      <div class="form-area clearfix">
        <span class="label fl lh80"><span class="text-warning">*</span>微信:</span>
        <div class="mi-input fr">
          <nut-textinput
            v-model="step1Ajax.data.wxNo"
            placeholder="请输入微信"
          />
        </div>
      </div>
      <div class="form-area">
        <nut-textinput
          v-model="step1Ajax.data.contractPhone"
          label="电话："
          placeholder="请输入电话"
        />
      </div>
      <div class="form-area mt20">
        <nut-row>
          <nut-col :span="12" :offset="6">
            <!-- <div class="btn btn-info btn-block" @click="rSubmitStep1Form">
              下一步
            </div> -->
            <van-button round block type="info" @click="rSubmitStep1Form">
              下一步
            </van-button>
          </nut-col>
        </nut-row>
      </div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img
          src="@/assets/images/artists/1.jpg"
          alt=""
        ></van-swipe-item>

        <van-swipe-item><img
          src="@/assets/images/artists/2.jpg"
          alt=""
        ></van-swipe-item>

        <van-swipe-item><img
          src="@/assets/images/artists/3.jpg"
          alt=""
        ></van-swipe-item>
      </van-swipe>
    </div>
    <div v-else-if="alone.steps == 2" class="o-step-2">
      <div class="a-noteTitle">请上传艺术写真（最多5张）</div>
      <div class="a-upload">
        <ul class="a-uploadList clearfix row">
          <li
            v-for="(item, index) in step2Ajax.data.pics"
            :key="item"
            class="a-uploadItem"
          >
            <div class="respBox">
              <div class="a-thumbnail">
                <img :src="item" alt="">
              </div>
              <div class="a-deleteImg">
                <div @click="rDeleteImg(index)">
                  <nut-icon type="cross" size="20px" />
                </div>
              </div>
            </div>
          </li>
          <li class="a-uploadItem">
            <div class="respBox">
              <div class="a-uploadBtn">
                <nut-uploader
                  class="a-uploadClick"
                  :name="uploadImgCp.config.name"
                  :clear-input="uploadImgCp.config.clearInput"
                  :url="uploadImgCp.config.url"
                  @success="rUploadImgSuc"
                  @fail="rUploadImgFail"
                />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="a-noteTitle">请上传作品视频（最多3个）</div>
      <div class="a-upload">
        <ul class="a-uploadList clearfix row">
          <li
            v-for="(item, index) in step2Ajax.data.videos"
            :key="item"
            class="a-uploadItem"
          >
            <div class="respBox">
              <div class="a-thumbnail">
                <video :src="item" />
              </div>
              <div class="a-deleteImg">
                <div @click="rDeleteVideo(index)">
                  <nut-icon type="cross" size="20px" />
                </div>
              </div>
            </div>
          </li>
          <li class="a-uploadItem">
            <div class="respBox">
              <div class="a-uploadBtn">
                <input
                  type="file"
                  class="a-uploadClick"
                  @change="rUploadVideo($event)"
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="mt20">
        <div class="form-area">
          <div class="label">
            <span class="text-warning" /><span>视频链接：</span>
          </div>
          <nut-button small type="default" @click="rAddVideoLink">
            添加视频链接
          </nut-button>
        </div>
        <div class="pl10 form-horizontal">
          <div
            v-for="(item, index) in step2Ajax.data.videoLinks"
            :key="index"
            class="form-area"
          >
            <div class="label">
              <span class="text-warning" /><span>视频链接{{ index + 1 }}：</span>
            </div>
            <div class="fieldset fieldset-videoLink">
              <nut-textinput
                v-model="step2Ajax.data.videoLinks[index]"
                label=""
                placeholder=""
              />
              <!-- <input type="text" class="input" /> -->
            </div>
            <div class="btn btn-default ml10" @click="rDeleteVideoLink(index)">
              删除
            </div>
          </div>
        </div>
      </div>
      <div class="mt20">
        <!-- <div class="form-area">
          <nut-radiogroup v-model="step2Ajax.data.hasLiveExperience">
            <span>是否有直播经验:</span>
            <nut-radio :label="1">有</nut-radio>
            <nut-radio :label="0">无</nut-radio>
          </nut-radiogroup>
        </div> -->
        <!-- <div v-if="step2Ajax.data.hasLiveExperience" class="form-area"> -->
        <div class="form-area">
          <div class="label">
            <span class="text-warning" /><span>直播经验：</span>
          </div>
          <nut-button small type="default" @click="rAddLiveExp">
            添加直播经验
          </nut-button>
        </div>
        <!-- <div v-if="step2Ajax.data.hasLiveExperience" class="pl10"> -->
        <div class="pl10">
          <div
            v-for="(item, index) in step2Ajax.data.liveExpEditVoList"
            :key="index"
          >
            <div class="form-area">
              <div class="label">
                <span class="text-warning" /><span>直播经验{{ index + 1 }}</span>
              </div>
              <nut-button small type="default" @click="rDeleteLiveExp(index)">
                删除
              </nut-button>
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].platfomId"
                label="*直播平台："
                placeholder="请输入直播平台："
              />
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].liveId"
                label="*直播id："
                placeholder="请输入直播id"
              />
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].fansCount"
                label="粉丝数量："
                placeholder="请输入粉丝数量"
              />
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].tradeUnion"
                label="原公会："
                placeholder="请输入原公会"
              />
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].monthStream"
                label="月流水："
                placeholder="请输入月流水"
              />
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].monthIncome"
                label="原待遇："
                placeholder="请输入原待遇"
              />
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].level"
                label="直播等级："
                placeholder="请输入直播等级"
              />
            </div>
            <div class="form-area clearfix">
              <div class="mi-input-f fl">
                <nut-textinput
                  v-model="step2Ajax.data.liveExpEditVoList[index].broadcastYears"
                  label="直播年限："
                  placeholder="请输入直播年限"
                />
              </div>
              <span class="addon fr lh80">年</span>
            </div>
            <div class="form-area clearfix">
              <div class="mi-input-f fl">
                <nut-textinput
                  v-model="step2Ajax.data.liveExpEditVoList[index].totalLiveTime"
                  label="日均直播时长："
                  placeholder="请输入日均直播时长"
                />
              </div>
              <span class="addon fr lh80">小时/日</span>
            </div>
            <div class="a-noteTitle">直播时间段</div>
            <div class="form-area">
              <van-cell
                title="选择开始时间"
                is-link
                :value="
                  step2Ajax.data.liveExpEditVoList[index].liveTimeStart || '无'
                "
                @click="rTriggerLiveTimeStartDatepickerCp(index)"
              />
            </div>
            <div class="form-area">
              <van-cell
                title="选择结束时间"
                is-link
                :value="
                  step2Ajax.data.liveExpEditVoList[index].liveTimeEnd || '无'
                "
                @click="rTriggerLiveTimeEndDatepickerCp(index)"
              />
            </div>
          </div>
        </div>
        <nut-datepicker
          type="time"
          title="请选择时间"
          :is-visible="liveTimeStartDatepickerCp.config.isVisible"
          @choose="rLiveTimeStartDatepickerCpChange"
          @close="rLiveTimeStartDatepickerCpClose"
        />
        <nut-datepicker
          type="time"
          title="请选择时间"
          :is-visible="liveTimeEndDatepickerCp.config.isVisible"
          @choose="rLiveTimeEndDatepickerCpChange"
          @close="rLiveTimeEndDatepickerCpClose"
        />
      </div>
      <br>
      <br>
      <div class="p10">
        <div class="a-noteTitle">请选择才艺</div>
        <div class="form-area">
          <van-checkbox-group
            v-model="step2Ajax.data.talentSkills"
            direction="horizontal"
          >
            <van-checkbox
              v-for="item in talentSkillsSupAjax.data"
              :key="item.id"
              :name="item.id"
              class=""
            >{{ item.value }}</van-checkbox>
          </van-checkbox-group>
          <nut-textinput
            v-model="step2Ajax.data.talentSkillExt"
            class="mt20"
            label="其他："
            placeholder=""
          />
        </div>
      </div>
      <div>
        <div class="a-noteTitle">发展意向</div>
        <div class="form-area">
          <van-field
            v-model="step2Ajax.data.artistDevIntention"
            class="border"
            rows="1"
            autosize
            label=""
            border
            type="textarea"
            placeholder="请输入发展意向"
          />
        </div>
      </div>
      <div style="margin-bottom: 30px">
        <!-- <div class="a-noteTitle">意向平台</div>
        <div class="form-area">
          <van-button @click="showPicker = true"> 选择意向平台</van-button>
        </div> -->
        <div class="label">
          <span class="text-warning" /><span>意向平台</span>
        </div>
        <nut-button small type="default" @click="showPicker = true">
          选择意向平台
        </nut-button>
        <div class="selsectPlatformList mt20 mb20">
          <span
            v-for="(item, index) in selsectPlatformList"
            :key="index"
            class="pr20"
          >
            <van-tag
              closeable
              size="large"
              type="primary"
              @close="delPlatformList(item.id, index)"
            >
              {{ item.name }}
            </van-tag>
          </span>
        </div>
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            ref="platformPicker"
            show-toolbar
            :columns="platformList"
            value-key="name"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
      </div>
      <div>
        <div class="form-area">
          <nut-radiogroup v-model="step2Ajax.data.deviceOwn">
            <span>是否自带设备:</span>
            <nut-radio :label="1">有</nut-radio>
            <nut-radio :label="0">无</nut-radio>
          </nut-radiogroup>
        </div>
        <div class="p10">
          <div class="form-area">
            <nut-textinput
              v-model="step2Ajax.data.deviceOther"
              label="备注："
              placeholder=""
            />
          </div>
        </div>
      </div>
      <div class="form-area mt20">
        <nut-row>
          <nut-col :span="12" :offset="6">
            <!-- <div class="btn btn-info btn-block mt20" @click="rSubmitStep2Form">
              提交
            </div> -->
            <van-button round block type="info" @click="rSubmitStep2Form">
              提交
            </van-button>
            <!-- <van-button type="default" @click="rSubmitStep2Form">默认按钮</van-button> -->
          </nut-col>
        </nut-row>
      </div>
    </div>
    <div v-else class="o-step-3">
      <div class="a-icon">
        <nut-icon type="tick" color="#11e517" size="30px" />
      </div>
      <div class="a-text">资料已提交成功，正在加紧处理中</div>
      <div class="a-text">
        如对进度有任何疑问请关注公众号“<span class="blue">娱加娱乐传媒</span>”咨询
      </div>
    </div>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import { Cell, Toast } from 'vant'
import 'vant/lib/cell/style'
import {
  addActorStep1,
  addActorStep2,
  uploadVideo,
  getSkillList,
  getPlatform,
  visit,
  getPlatfomDocList
} from '@/api/visitor.js'
// import _ from "lodash";
export default {
  name: 'Home',
  components: { vanCell: Cell },
  data() {
    return {
      step1Ajax: {
        loading: false,
        data: {
          channelId: 0,
          contractPhone: '',
          gender: 2,
          nickName: '',
          wxNo: ''
        }
      },
      showPicker: false,
      platformList: [], // 平台列表
      selsectPlatformList: [], // 选择平台列表
      step2Ajax: {
        loading: false,
        data: {
          anchorId: 1,
          artistDevIntention: '',
          deviceOther: '',
          deviceOwn: 0,
          pics: [],
          expectedBaseSalary: '',
          expectedBottomGuard: '',
          expectedOther: '',
          expectedSigningBonus: '',
          hasLiveExperience: 0,
          intentionPlatforms: [],
          liveExpEditVoList: [],
          talentSkillExt: '',
          talentSkills: [],
          videoLinks: [],
          videos: []
        }
      },
      talentSkillsSupAjax: {
        data: []
      },
      platfomDocSupAjax: {
        data: []
      },
      alone: {
        steps: 1,
        currentLiveExpIndex: 0,
        anchorId: 0,
        checkAll: 0
      },

      uploadImgCp: {
        config: {
          name: 'file',
          url: '/bs/upload',
          clearInput: true
        }
      },
      uploadVideoCp: {
        config: {
          name: 'file',
          url: '/bs/upload',
          clearInput: true,
          acceptType: ['*']
        }
      },
      talentSkillsPickerCp: {
        config: {
          isVisible: false
        }
      },
      liveTimeStartDatepickerCp: {
        config: {
          isVisible: false
        }
      },
      liveTimeEndDatepickerCp: {
        config: {
          isVisible: false
        }
      }
      // val: "",
      // radioGroupVal1: "",
      // defaultValueData1: [],
      // listData1: [],
      // checkbox1: ""
    }
  },
  created() {
    const data = {
      channelId: this.$route.query.channelId || '',
      mid: this.$route.query.mid || ''
    }
    // 浏览统计
    visit(data)
    this.getSkillListData()
    this.getPlatfomDocListData()
    this.getPlatfomDocListData()
    this.getPlatform()
  },
  methods: {
    getPlatform() {
      const data = {
        channelId: this.$route.query.channelId || 56,
        hierarchy: 1,
        mask: 1
      }
      getPlatform({ params: data }).then(res => {
        const respData = res.data || {}
        respData.data = respData.data || []

        this.platformList = respData.data
      })
    },
    setdataAll(data) {
      let result = ''
      const setdata = data => {
        const obj = {
          name: '全部'
        }
        if (data.children == null) {
          data.children = [obj]
        } else if (data.children) {
          data.children.unshift(obj)
        }
      }
      data.forEach(v => {
        setdata(v)
      })
      result = data
      return result
    },
    onConfirm(e) {
      const obj = {
        name: [],
        id: null
      }
      const arr = []
      const tree = this.platformList
      const index = this.$refs.platformPicker.getIndexes()
      arr.push(tree)
      const getChildren = obj => {
        if (obj.children) {
          arr.push(obj.children)
        }
      }
      index.forEach((v, i) => {
        getChildren(arr[i][v])
      })
      index.forEach((v, i) => {
        if (arr[i][v] && arr[i][v].id) {
          obj.name.push(arr[i][v].name)
          obj.id = arr[i][v].id
        }
      })
      if (this.step2Ajax.data.intentionPlatforms.indexOf(obj.id) < 0) {
        obj.name = obj.name.join('/')
        this.selsectPlatformList.push(obj)
        this.step2Ajax.data.intentionPlatforms.push(obj.id)
        this.showPicker = false
      } else {
        Toast('平台已经添加')
      }
    },
    delPlatformList(id, i) {
      const intentionSelectArr = this.step2Ajax.data.intentionPlatforms
      intentionSelectArr.splice(intentionSelectArr.indexOf(id), 1)
      const arr = this.selsectPlatformList
      arr.splice(i, 1)
      this.step2Ajax.data.intentionPlatforms = intentionSelectArr
      this.selsectPlatformList = arr
    },

    checkAll(v) {
      if (v) {
        this.$refs.all.toggleAll(true)
      } else {
        this.$refs.all.toggleAll(false)
      }
    },
    rUploadImgSuc(f, resp) {
      const _that = this

      if (_that.step2Ajax.data.pics.length >= 5) {
        _that.$toast.fail('最多能上传5张图片，请删除后再上传')
        return
      }
      resp = typeof resp === 'string' ? JSON.parse(resp) : resp
      const respData = resp.data || {}
      if (resp.code === _that.STATUS.success[0]) {
        _that.step2Ajax.data.pics.push(respData.fileUrl)
        _that.$toast.success(respData.msg || '上传成功')
      } else {
        _that.$toast.fail(respData.msg || '上传失败')
      }
    },
    rUploadImgFail() {
      this.$toast.success('上传失败')
    },
    rDeleteImg(index) {
      const _that = this
      _that.$dialog({
        title: '确定删除此图片？',
        onOkBtn() {
          _that.step2Ajax.data.pics.splice(index, 1)
          this.close() // 关闭对话框
        }
      })
    },
    rUploadVideo(val) {
      const _that = this

      if (_that.step2Ajax.data.videos.length >= 3) {
        _that.$toast.fail('最多能上传3个视频，请删除后再上传')
        return
      }
      const formData = new FormData()
      formData.append('file', val.target.files[0])
      uploadVideo(formData)
        .then(resp => {
          const respData = resp.data || {}
          if (respData.code === _that.STATUS.success[0]) {
            _that.step2Ajax.data.videos.push(respData.data.fileUrl)
            _that.$toast.success(respData.msg || '上传成功')
          } else {
            _that.$toast.fail(respData.msg || '上传出现错误')
          }
        })
        .finally(() => {
          _that.step2Ajax.loading = false
          val.target.value = ''
        })
    },
    rDeleteVideo(index) {
      const _that = this
      _that.$dialog({
        title: '确定删除此视频？',
        onOkBtn() {
          _that.step2Ajax.data.videos.splice(index, 1)
          this.close() // 关闭对话框
        }
      })
    },
    rAddVideoLink() {
      this.step2Ajax.data.videoLinks.push('')
    },
    rDeleteVideoLink(index) {
      const _that = this
      // let videoLinks = _.cloneDeep(_that.step2Ajax.data.videoLinks);
      _that.$dialog({
        title: '确定删除此视频链接？',
        onOkBtn() {
          _that.step2Ajax.data.videoLinks.splice(index, 1)
          // _that.step2Ajax.data.videoLinks = videoLinks;
          // console.log(_that.step2Ajax.data.videoLinks)
          this.close() // 关闭对话框
        }
      })
    },
    rAddLiveExp() {
      console.log(12312)

      const liveExpEditVoItem = {
        fansCount: '',
        level: '',
        liveId: '',
        liveTimeEnd: '',
        liveTimeStart: '',
        monthIncome: '',
        monthStream: '',
        platfomId: '',
        totalLiveTime: '',
        tradeUnion: ''
      }
      this.step2Ajax.data.liveExpEditVoList.push(liveExpEditVoItem)
    },
    rDeleteLiveExp(index) {
      const _that = this
      // let videoLinks = _.cloneDeep(_that.step2Ajax.data.videoLinks);
      _that.$dialog({
        title: '确定删除此直播经验？',
        onOkBtn() {
          _that.step2Ajax.data.liveExpEditVoList.splice(index, 1)
          // _that.step2Ajax.data.videoLinks = videoLinks;
          // console.log(_that.step2Ajax.data.videoLinks)
          this.close() // 关闭对话框
        }
      })
    },
    rTriggerTalentSkillsPickerCp() {
      console.log('ddd')
      this.talentSkillsPickerCp.config.isVisible = true
    },
    rTriggerLiveTimeStartDatepickerCp(index) {
      this.alone.currentLiveExpIndex = index
      this.liveTimeStartDatepickerCp.config.isVisible = true
    },
    rLiveTimeStartDatepickerCpChange(e) {
      const t = e[2]
      this.step2Ajax.data.liveExpEditVoList[
        this.alone.currentLiveExpIndex
      ].liveTimeStart = t
      // this.step2Ajax.data.
    },
    rLiveTimeStartDatepickerCpClose() {
      this.liveTimeStartDatepickerCp.config.isVisible = false
    },

    rTriggerLiveTimeEndDatepickerCp(index) {
      this.alone.currentLiveExpIndex = index
      this.liveTimeEndDatepickerCp.config.isVisible = true
    },
    rLiveTimeEndDatepickerCpChange(e) {
      const t = e[2]
      this.step2Ajax.data.liveExpEditVoList[
        this.alone.currentLiveExpIndex
      ].liveTimeEnd = t
    },
    rLiveTimeEndDatepickerCpClose() {
      this.liveTimeEndDatepickerCp.config.isVisible = false
    },
    rSubmitStep1Form() {
      const _that = this
      const formData = _that.step1Ajax.data
      if (_that.step1Ajax.loading) {
        return
      }

      if (!formData.nickName) {
        _that.$toast.fail('昵称不能为空')
        return
      }
      if (!formData.wxNo) {
        _that.$toast.fail('微信不能为空')
        return
      }
      const channelId = _that.$route.query.channelId
      formData.channelId = channelId
      const mid = _that.$route.query.mid
      if (mid) {
        formData.channelMaterialId = mid
      }
      _that.step1Ajax.loading = true
      addActorStep1(formData)
        .then(resp => {
          const respData = resp.data || {}
          if (respData.code === _that.STATUS.success[0]) {
            // _that.$$toast.success(respData.msg || "登陆出现错误");
            // _that.getUserInfo();
            document.title = '让我们更了解你~'
            _that.alone.steps = 2
            _that.alone.anchorId = respData.data
          } else {
            _that.$toast.fail(respData.msg || '提交出现错误')
          }
        })
        .finally(() => {
          _that.step1Ajax.loading = false
        })
    },
    rSubmitStep2Form() {
      const _that = this
      const formData = _that.step2Ajax.data
      if (_that.step2Ajax.loading) {
        return
      }
      if (!formData.pics) {
        _that.$toast.fail('图片不能为空，最少上传一个图片')
        return
      }
      if (!formData.videos) {
        _that.$toast.fail('视频不能为空，最少上传一个视频')
        return
      }
      if (formData.videoLinks && formData.videoLinks.length > 0) {
        for (let i = formData.videoLinks.length; i--;) {
          if (!formData.videoLinks[i]) {
            _that.$toast.fail('视频链接' + (i + 1) + '不能为空')
            return
          }
        }
      }

      if (formData.liveExpEditVoList.length) {
        for (let i = formData.liveExpEditVoList.length; i--;) {
          if (!formData.liveExpEditVoList[i].platfomId) {
            _that.$toast.fail('直播' + (i + 1) + '平台不能为空')
            return
          }
          if (!formData.liveExpEditVoList[i].liveId) {
            _that.$toast.fail('直播' + (i + 1) + 'id不能为空')
            return
          }
          formData.hasLiveExperience = 1
        }
      } else {
        formData.hasLiveExperience = 0
        formData.liveExpEditVoList.length = 0
      }

      if (!formData.talentSkills) {
        _that.$toast.fail('才艺不能为空')
        return
      }

      const channelId = _that.$route.query.channelId || 1
      formData.channelId = channelId
      formData.anchorId = _that.alone.anchorId

      _that.step2Ajax.loading = true
      addActorStep2(formData)
        .then(resp => {
          const respData = resp.data || {}
          if (respData.code === _that.STATUS.success[0]) {
            document.title = '提交已完成~'
            _that.alone.steps = 3
            _that.$toast.success(respData.msg || '提交成功')
          } else {
            _that.$toast.fail(respData.msg || '提交出现错误')
          }
        })
        .finally(() => {
          _that.step2Ajax.loading = false
        })
    },

    getSkillListData() {
      const _that = this
      getSkillList()
        .then(resp => {
          const respData = resp.data || {}
          if (respData.code === _that.STATUS.success[0]) {
            _that.talentSkillsSupAjax.data = respData.data
          } else {
            _that.$toast.fail(respData.msg || '提交出现错误')
          }
        })
        .finally(() => {})
    },
    getPlatfomDocListData() {
      const _that = this
      const channelId = _that.$route.query.channelId || 1

      getPlatfomDocList({ params: { channelId: channelId }})
        .then(resp => {
          const respData = resp.data || {}
          if (respData.code === _that.STATUS.success[0]) {
            _that.platfomDocSupAjax.data = respData.data.list
          } else {
            _that.$toast.fail(respData.msg || '提交出现错误')
          }
        })
        .finally(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.blue {
  color: #53adfb;
}
.title {
  text-align: center;
  font-size: 32px;
  padding-bottom: 20px;
}
.my-swipe {
  margin-top: 50px;
  .van-swipe-item {
    img {
      width: 100%;
    }
  }
}
.page {
  padding: 20px;
  .form-area {
    margin-bottom: 20px;
  }
  .banner {
    margin-bottom: 20px;
    img {
      width: 100%;
    }
  }

  .a-uploadItem {
    position: relative;
    float: left;
    width: 33.33%;
    padding: 10px;
    box-sizing: border-box;
  }
  .a-thumbnail {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .a-uploadItem img,
  .a-uploadItem video {
    width: 100%;
    height: 100%;
  }
  .a-deleteImg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    // display: flex;
    // align-items: center;
    div {
      position: absolute;
      right: 0;
      top: 0;
      padding: 5px;
      color: #ff0000;
    }
  }
  .a-uploadBtn {
    position: absolute;
    left: 0;
    top: 0;
    // margin: 15px 15px 0 0;
    width: 100%;
    height: 100%;
    background-color: #ededed;
  }
  .a-uploadBtn:before,
  .a-uploadBtn:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #a3a3a3;
  }
  .a-uploadBtn:before {
    width: 2px;
    height: 32px;
  }
  .a-uploadBtn:after {
    width: 32px;
    height: 2px;
  }
  .a-uploadClick {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
  }
  .a-platformTitle {
    text-align: center;
    font-weight: 700;
  }
  .a-noteTitle {
    line-height: 2;
    color: #000;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .btn-block {
    display: block;
  }
  // .van-checkbox--horizontal{
  //   margin-bottom: 20px;
  // }

  .s-platform {
    .a-item {
      position: relative;
      float: left;
      width: 150px;
      padding: 5px;
      border: 1px solid #eee;
      margin-right: 10px;
      box-shadow: 0 2px 10px #ededed;
    }
    .a-logo {
      height: 50px;
      width: 100%;
      img {
        display: block;
        height: 100%;
        width: auto;
        margin: 0 auto;
      }
    }
    .a-note {
      margin-top: 5px;
      padding: 5px;
      height: 110px;
      overflow: scroll;
      p {
        margin-top: 5px;
      }
    }
    .a-checkbox {
      position: absolute;
      right: 2px;
      top: 2px;
    }
  }
  .o-step-3 {
    margin-top: 200px;
    text-align: center;
    .a-text {
      margin-top: 20px;
      font-size: 26px;
    }
  }
}
.border {
  border: 1px solid #dddfe6;
  border-radius: 5px;
}
.selsectPlatformList {
  box-sizing: border-box;
  padding-left: 160px;
}
</style>
<style lang="scss">
.mt20 {
  margin-top: 20px;
}
.mb20 {
  margin-bottom: 20px;
}
.pr20 {
  padding-right: 20px;
}
.text-warning {
  color: #ff0000;
}
$labelWidth: 160px;
.home {
  .nut-textinput-label {
    width: $labelWidth;
    text-align: right;
  }
  .mi-input {
    width: 500px;
  }
  .mi-input-f {
    width: 550px;
  }
  .label {
    display: inline-block;
    width: $labelWidth;
    text-align: right;
    padding-right: 10px;
    box-sizing: border-box;
  }
  .addon {
    width: 95px;
  }
  .lh80 {
    line-height: 80px;
  }
  .fieldset-videoLink input {
    padding-right: 0;
  }
}
</style>
